<template>

    <a-layout  class="homeRoot">

        <a-layout-sider    theme="light" width="256"  v-model="collapsed" :trigger="null" collapsible>

            <AsideMenu  @menuClick="onMenuClick"></AsideMenu>


        </a-layout-sider>

        <a-layout class="contentRoot">

            <a-layout-header style="background: #fff; padding: 0;display: flex;align-items: center;border-bottom: #f0f2f5 solid 1px">
                <a-icon
                        class="trigger"
                        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                        @click="()=> collapsed = !collapsed"
                />

                <a-breadcrumb style="flex:1">
                    <a-breadcrumb-item v-for="item in breadcrumbItems">{{item}}</a-breadcrumb-item>
                </a-breadcrumb>

                <UserAvatar ></UserAvatar>

            </a-layout-header>

            <a-layout-content style="flex: 1;padding: 0 15px;overflow-y: auto">

                <router-view style="height: 100%;"></router-view>
            </a-layout-content>

        </a-layout>

    </a-layout>

</template>

<script>


    import persistentUtil from '../common/persistentUtil'
    import Vue from 'vue';
    import {Layout,Icon,Breadcrumb,message} from 'ant-design-vue';

    // @ is an alias to /src
    import AsideMenu from '@/components/asideMenu/AsideMenuComponent.vue'

    import UserAvatar from '@/components/user/UseAvatarComponent.vue'

    export default {

        name: 'home',
        components: {
            AsideMenu,
            UserAvatar,
            ALayout:Layout,
            ALayoutSider:Layout.Sider,
            ALayoutContent:Layout.Content,
            ALayoutHeader:Layout.Header,
            AIcon:Icon,
            ABreadcrumb:Breadcrumb,
            ABreadcrumbItem:Breadcrumb.Item
        },
        data(){
            return {
                collapsed: false,
                breadcrumbItems: [],
            };
        },

        mounted(){

            //处理完路由 加载默认主页
            this.loadHomePage();
        },

        methods:{


            loadHomePage(){


                let token = persistentUtil.getToken();

                if(token == null || token == undefined){

                    //当前未登录 就不要加载默认主页
                    return;
                }

                let fullPath = this.$route.fullPath;

                //如果是根路径 就去获取主页 否则 不管
                if(fullPath === '/'){

                    this.$axios.get("/auth/getHomePagePath")
                        .then(d=>{
                            if(d.data.status == 0){

                                let path = d.data.data;

                                this.$router.replace(path);

                            }else{
                                message.error("当前未设置默认主页")
                            }
                        },e=>{
                            message.error("默认主页获取失败")
                        })
                }


            },


            onMenuClick(permission){

                let key = permission.permissionUrl;

                let title = permission.permissionName;

                Vue.prototype.$rightContainerTitle = title;


                let spIndex = key.indexOf("/");

                if(-1 === spIndex || spIndex > 0){
                    key =   key.substring(0);
                }

                this.$router.replace(key);

                this.breadcrumbItems = [];

                let matched = this.$route.matched;

                for(let matchedItem of matched){

                    let meta = matchedItem.meta;
                    if(meta.breadcrumbName){

                        if(Array.isArray(meta.breadcrumbName)){

                            this.breadcrumbItems = this.breadcrumbItems.concat(meta.breadcrumbName);
                        }else{
                            this.breadcrumbItems.push(meta.breadcrumbName);
                        }
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .homeRoot{
        height: 100vh;

    }
    .contentRoot{
        display: flex;
        flex-direction: column;
    }

    .trigger {
        font-size: 18px;
        padding: 0 24px;
        cursor: pointer;
        transition: color .3s;
    }

    .trigger:hover {
        color: #1890ff;
    }

</style>